<template>
  <div>
    <div class="header">
      <span class="header-title">基础信息管理</span>
      <span class="divider">|</span>
      <span class="sub-title">预警接收管理</span>
    </div>

    <div class="control-panel">
      
      <el-row>
        <el-col :span="2">
          <el-select v-model="city" placeholder="全市" class="control-item">
            <el-option label="全市" value=""></el-option>
            <el-option label="雨城" value="雨城"></el-option>
            <el-option label="名山" value="名山"></el-option>
            <el-option label="经开" value="经开"></el-option>
            <el-option label="天全" value="天全"></el-option>
            <el-option label="芦山" value="芦山"></el-option>
            <el-option label="宝兴" value="宝兴"></el-option>
            <el-option label="荥经" value="荥经"></el-option>
            <el-option label="汉源" value="汉源"></el-option>
            <el-option label="石棉" value="石棉"></el-option>
          </el-select>
        </el-col>

        <el-col v-if="city && city !== ''" :span="2">
          <el-select v-model="town1" placeholder="请选择乡镇" class="control-item">
            <el-option v-for="option in townOptions" :key="option.name" :label="option.label" :value="option.label" />
          </el-select>
        </el-col>

        <!-- 隐患类型选择 -->
        <el-col :span="2">
            <el-select v-model="hazardType" placeholder="全部类型" class="control-item">
              <el-option label="全部类型" value=""></el-option>
              <el-option v-for="(type, index) in hazardTypes" :key="index" :label="type" :value="type"></el-option>
            </el-select>
       </el-col>


        <el-col :span="3">
          <el-select v-model="rainforcastConfirm" placeholder="短时强降水回执" class="control-item">
            <el-option label="短时强降水回执" value=""></el-option>
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-select v-model="productConfirm" placeholder="短时预警回执" class="control-item">
            <el-option label="短时预警回执" value=""></el-option>
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </el-col>



        </el-row>

        <el-row>
        <el-col :span="2">
          <el-select v-model="searchType" placeholder="手机号码" class="control-item">
            <el-option label="手机号码" value="tel"></el-option>
            <el-option label="姓名" value="name"></el-option>
          </el-select>
        </el-col>

        <el-col :span="5">
          <el-input v-model="hazardId" placeholder="请输入查询内容" class="control-item"></el-input>
        </el-col>

        <el-col :span="2">
          <el-button @click="searchHazards" type="primary" class="control-item">查找</el-button>
        </el-col>

        <el-col :span="2">
          <el-button @click="showAll" type="default" class="control-item">清除条件</el-button>
        </el-col>

        <el-col :span="3" style="color: white; display: flex; justify-content: center; align-items: center;padding-top: 10px;">
          <span>清除条件则显示全部用户</span>
        </el-col>

       
        <el-col :span="2">
          <el-button @click="openAddUserDialog" type="default" class="control-item">新增用户</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 表格 -->
    <div>
      <el-table 
  class="product" 
  :data="groupData" 
  stripe 
  style="width: 100%; table-layout: fixed;" 
  :header-cell-style="headerCellStyle"
  :cell-style="cellStyle" 
  :row-style="rowStyle">
  
  <el-table-column prop="tel" label="手机" min-width="100" />
  <el-table-column prop="name" label="姓名" min-width="50" />
  <el-table-column prop="featrueLabel" label="职位" min-width="80" />
  <el-table-column prop="duty" label="职责" min-width="80" />
  <el-table-column prop="county" label="区县" min-width="50" />
  <el-table-column prop="town" label="乡镇" min-width="60" />
  <el-table-column prop="village" label="村" min-width="70" />
  <el-table-column prop="street" label="街道" min-width="50" />
  <el-table-column prop="unit" label="单位" min-width="150" />
  <el-table-column prop="type" label="灾害类型" min-width="100" />
  <el-table-column prop="sgroup" label="行业" min-width="100" />
  <el-table-column prop="productConfirm" label="短期预警回执" min-width="50" :formatter="formatterYesNo" />
  <el-table-column prop="rainforcastConfirm" label="短期强降水回执" min-width="50" :formatter="formatterYesNo" />
  <el-table-column prop="product" label="接收产品范围" min-width="50" />
  <el-table-column prop="editTime" label="编辑时间" min-width="80" />
  <el-table-column prop="isoldphone" label="老年机" min-width="50" :formatter="formatterYesNo" />
  <el-table-column prop="operate" label="操作" min-width="150">
    <template slot-scope="scope">
      <el-button type="info" size="small" class="operation-button" @click="editUser(scope.row)">编辑</el-button>
      <el-button type="primary" size="small" class="operation-button" @click="deleteUser(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

    </div>

          <!-- 弹窗 -->
          <el-dialog :visible.sync="dialogVisible" width="50%">
            <el-form :model="newUserForm" label-width="120px" :rules="formRules">
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="newUserForm.name" size="small" style="width: 150px;"></el-input>
        </el-form-item>

        <!-- 手机号码 -->
        <el-form-item label="手机号码" prop="tel">
          <el-input v-model="newUserForm.tel" size="small" style="width: 200px;"></el-input>
          <span class="input-help">请输入11位手机号码</span>
        </el-form-item>

        <!-- 是否老年机 -->
        <el-form-item label="是否老年机" prop="isoldphone">
          <el-select v-model="newUserForm.isoldphone" placeholder="请选择" size="small" style="width: 100px;">
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
          <span class="input-help">如果选择是的，将第一时间进行语音外呼确认回执</span>
        </el-form-item>

        <!-- 职业 -->
        <el-form-item label="职业" prop="featrueLabel">
          <el-input v-model="newUserForm.featrueLabel" size="small" style="width: 200px;"></el-input>
          <span class="input-help">副指挥长以上接收市级和所在县产品</span>
        </el-form-item>
      
        <el-form-item label="省" prop="province">
          <el-select v-model="newUserForm.province" size="small" style="width: 100px;">
            <el-option label="四川省" value="四川省"></el-option>
          </el-select>
        </el-form-item>
         
        <el-form-item label="市" prop="province">
          <el-select v-model="newUserForm.city" size="small" style="width: 100px;">
            <el-option label="雅安" value="雅安"></el-option>
          </el-select>
        </el-form-item>

        <!-- 区县 -->
        <el-form-item label="区县" prop="county">
          <el-select v-model="newUserForm.county" size="small" style="width: 100px;" @change="onCountyChange">
            <el-option label="雨城" value="雨城"></el-option>
            <el-option label="名山" value="名山"></el-option>
            <el-option label="经开" value="经开"></el-option>
            <el-option label="天全" value="天全"></el-option>
            <el-option label="芦山" value="芦山"></el-option>
            <el-option label="宝兴" value="宝兴"></el-option>
            <el-option label="荥经" value="荥经"></el-option>
            <el-option label="汉源" value="汉源"></el-option>
            <el-option label="石棉" value="石棉"></el-option>
          </el-select>
          <span class="input-help">市级用户请选择雅安,区县用户选择对应区县</span>
        </el-form-item>

        <!-- 乡镇 -->
        <el-form-item label="乡镇" prop="town">
          <el-select v-model="newUserForm.town" size="small" style="width: 150px;">
            <el-option
          v-for="option in townOptions"
          :key="option.name"
          :label="option.label"
          :value="option.label"
         >
        </el-option>
          </el-select>
          <span class="input-help">市级用户选择雅安，区县用户选择县区，乡镇用户选择所属乡镇</span>
        </el-form-item>
      
        <!-- 村 -->
        <el-form-item label="村" prop="village">
          <el-input v-model="newUserForm.village" size="small" style="width: 300px;"></el-input>
        </el-form-item>

        <!-- 街道 -->
        <el-form-item label="街道" prop="street">
          <el-input v-model="newUserForm.street" size="small" style="width: 300px;"></el-input>
        </el-form-item>
      
        <!-- 单位/项目单位 -->
        <el-form-item label="单位/项目单位" prop="unit">
          <el-input v-model="newUserForm.unit" size="small" style="width: 300px;"></el-input>
          <span class="input-help">填写人员所在单位全称或工程项目全称</span>
        </el-form-item>
      
        <el-form-item label="服务级别" prop="slevel">
      <el-input v-model="newUserForm.slevel" size="small" style="width: 100px;"></el-input> 
      <span class="input-help">1-5共5级</span>
    </el-form-item>

    <el-form-item label="灾害类型" prop="province">
          <el-select v-model="newUserForm.type" size="small" style="width: 150px;">
            <el-option label="地质灾害" value="地质灾害"></el-option>
            <el-option label="山洪预警" value="山洪预警"></el-option>
          </el-select>
        </el-form-item>

        <!-- 防灾职责 -->
        <el-form-item label="防灾职责" prop="duty">
          <el-input v-model="newUserForm.duty" size="small" style="width: 100px;"></el-input>
        </el-form-item>
      
       <!-- 职位 -->
    <el-form-item label="职位" prop="featrueLabel">
      <el-input v-model="newUserForm.featrueLabel" size="small" style="width: 150px;"></el-input>
    </el-form-item>

        <!-- 服务总次数 -->
        <el-form-item label="服务总次数" prop="serviceCount">
              <el-input v-model="newUserForm.serviceCount" size="small" style="width: 100px;"></el-input>
            </el-form-item>
          
        <!-- 行业 -->
        <el-form-item label="行业" prop="sgroup">
          <el-select v-model="newUserForm.sgroup" placeholder="全部类型">
              <el-option label="全部类型" value=""></el-option>
              <el-option v-for="(type, index) in hazardTypes" :key="index" :label="type" :value="type"></el-option>
            </el-select>
   
        </el-form-item>

        <!-- 产品范围 -->
        <el-form-item label="产品范围 " prop="product">
          <el-select v-model="newUserForm.product" >
              <el-option v-for="(type, index) in productZones" :key="index" :label="type" :value="type"></el-option>
            </el-select>
   
        </el-form-item>
      
        <!-- 短期预警回执 -->
        <el-form-item label="短期预警回执" prop="productConfirm">
          <el-select v-model="newUserForm.productConfirm" placeholder="请选择" size="small" style="width: 100px;">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
          <span class="input-help">指0-6小时短时强降水天气预报是否回执</span>
        </el-form-item>
      
        <!-- 短期强降水回执 -->
        <el-form-item label="短期强降水回执" prop="rainforcastConfirm">
          <el-select v-model="newUserForm.rainforcastConfirm" placeholder="请选择" size="small" style="width: 100px;">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
          <span class="input-help">指24小时地质灾害气象风险预警是否回执</span>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
        <el-button type="primary" @click="submitNewUser">保存/更新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Request from "@/utils/request";
import Cookies from "js-cookie";
import { setTabs } from "@/views/home/management/townList.js";
export default {
  data() {
    return {
      city: '',
      county:'',
      town1:'',
      hazardId:'',
      hazardType: "",      
      hazardTypes: [],
      hazardName: "",
      searchType: "",
      productConfirm: "",
      rainforcastConfirm: "",
      columns: [
        { prop: 'tel', label: '手机' },
        { prop: 'name', label: '姓名' },
        { prop: 'featrueLabel', label: '职位' },
        { prop: 'duty', label: '职责' },
        { prop: 'county', label: '区县' },
        { prop: 'town', label: '乡镇' },
        { prop: 'village', label: '村' },
        { prop: 'street', label: '街道' },
        { prop: 'unit', label: '单位' },
        { prop: 'type', label: '灾害类型' },
        { prop: 'sgroup', label: '行业' },
        { prop: 'productConfirm', label: '短期预警回执'},
        { prop: 'rainforcastConfirm', label: '短期强降水回执'},
        { prop: 'product', label: '接收产品范围' },
        { prop: 'editTime', label: '编辑时间' },
        { prop: 'isoldPhone', label: '老年机' },
        { prop: 'edit', label: '操作' }
      ],
      groupData: [],
      townOptions: [],
      productZones:[],
      dialogVisible: false,
      formRules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{11}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        isoldphone: [
          { required: true, message: '请选择是否老年机', trigger: 'change' }
        ],
        position: [
          { required: true, message: '请选择职业', trigger: 'change' }
        ],
        county: [
          { required: true, message: '请选择区县', trigger: 'change' }
        ],
        town: [
          { required: true, message: '请输入乡镇', trigger: 'blur' }
        ],
      },
      newUserForm: {
           province:'',
           tel: '',  
           name: '',  
           province: '',  
           city: '', 
           county: '',  
           town: '', 
           village: '', 
           street: '',  
           unit: '',  
           slevel: '',  
           type: '',  
           sgroup: '', 
           lastServiceTime: '',  
           serviceCount: '',  
           featrueLabel: '',  
           frequency: '', 
           product: '',  
           editTime: '',  
           isoldphone: '',  
           productConfirm: '',  
           duty: '', 
           rainforcastConfirm: '',  
           error: ''  
          },
         
    };
  },
  watch: {
    city(newCity) {
      this.onCityChange(); 
    },
  },
  
  mounted() {
        this.fetchHazardTypes();
        this.fetchProductZone();
        this.searchHazards();
      },
      methods: {
      onCityChange() {
      if (this.city) {
        this.town1 = ''; 
        this.townOptions = []; 
        this.townOptions = setTabs(this.city); 
      }
    },    
    onCountyChange() {
      this.townOptions = setTabs(this.newUserForm.county); 
    },
    

        formatterYesNo(row, column, cellValue) {
    return cellValue === true ? '是' : cellValue === false ? '否' : cellValue;
  },
        //获取隐患点类型
  fetchHazardTypes() {
    Request.get('/telephone/sgroupType')
      .then(response => {
        if (response.data.code === 200) {
          this.hazardTypes = response.data.data;
        } else {
          this.$message.error('获取隐患类型失败');
        }
      })
      .catch(error => {
        console.error('请求失败:', error);
        this.$message.error('获取隐患类型失败');
      });
  },
  //产品区域
  fetchProductZone() {
    Request.get('/telephone/productZone')
      .then(response => {
        if (response.data.code === 200) {
          this.productZones = response.data.data;
        } else {
          this.$message.error('获取产品区域失败');
        }
      })
      .catch(error => {
        console.error('请求失败:', error);
        this.$message.error('获取产品区域失败');
      });
  },
  openAddUserDialog() {
    this.dialogVisible = true;
    this.newUserForm = {};  
  },
  // 新增
  submitNewUser() {
    this.newUserForm.editTime = new Date().toISOString();
    Request.post('/telephone/add', this.newUserForm)
      .then(response => {
        if (response.data.code === 200) {
          this.$message.success('新增用户成功');
          this.dialogVisible = false;
          this.searchHazards();  
        } else {
          this.$message.error('新增用户失败');
        }
      })
      .catch(error => {
        console.error('请求失败:', error);
        this.$message.error('新增用户失败');
      });
  },
  // 查询
  searchHazards() {
    const data = {
      pageNum: 1, 
      pageSize: 99999,  
      telephoneNumber: this.searchType === 'tel' ? this.hazardId : '',  
      name: this.searchType === 'name' ? this.hazardId : '',  
      city: this.city, 
      county:this.county,  
      town: this.town1, 
      type: this.hazardType, 
      rainforcastConfirmType: this.rainforcastConfirmType,  
      productConfirmType: this.productConfirmType  
    };
    const queryParams = new URLSearchParams(data).toString();
    const url = `/telephone/list?${queryParams}`;
    Request.post(url)
      .then(response => {
        if (response.data.code === 200) {
          this.groupData = response.data.data.list.map(item => {
          return {
            ...item,
            isoldphone:item.isoldphone === 'true' ? '是' : '否',
            rainforcastConfirmType: item.rainforcastConfirmType === 'true' ? '是' : '否',
            productConfirmType: item.productConfirmType === 'true' ? '是' : '否',
            
          };
        });
        } else {
          this.$message.error('请求失败');
        }
      })
      .catch(error => {
        console.error('请求失败:', error);
        this.$message.error('请求失败');
      });
  },
  //编辑
  editUser(user) {
    this.newUserForm = { ...user,editTime: new Date().toISOString() };  
    this.dialogVisible = true;  
  },
  // 删除
  deleteUser(user) {
    this.$confirm('确认删除该用户吗?', '提示', {
      type: 'warning'
    }).then(() => {
      const data = {
        telephone: user.phone,
        type: user.disasterType
      };
      Request.get('/telephone/del', { params: data })
        .then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除用户成功');
            this.searchHazards();  
          } else {
            this.$message.error('删除用户失败');
          }
        })
        .catch(error => {
          console.error('请求失败:', error);
          this.$message.error('删除用户失败');
        });
    }).catch(() => {});
  },
  // 清空条件
  showAll() {
    this.city = '';
    this.town1 = '';
    this.hazardType = '';
    this.productConfirmType = '';
    this.rainforcastConfirmType = '';
    this.hazardId = '';
    this.searchHazards();  
  },
  headerCellStyle() {
    return {
      background: "#0c2340",
      color: "#fff",
    };
  },
  cellStyle() {
    return {
      background: "#05152e",
      color: "#fff",
    };
  },
  rowStyle() {
    return {
      height: "30px",
    };
  }
}

};
</script>



<style lang="less">

.product {
  width: 100%;
  font-size: 12px;
}
.header {
  display: flex;
  align-items: center;
  padding: 10px;
  color: #fff;
}
.header-title {
  margin-right: 20px;
  font-weight: bold;
}
.divider {
  margin-right: 20px;
}
.sub-title {
  display: flex;
  align-items: center;
}

.control-panel {
  margin: 20px 0;
}
.control-item {
  width: 100%;
}
.el-col {
  margin-bottom: 10px;
  margin-right: 10px;
}
.hazard-count {
  font-size: 16px;
  color: #fff;
  line-height: 32px;
}
.operation-button {
  margin-left: 10px;
}
.control-item .el-input__inner {
  background-color: rgb(36, 54, 101);
  color: white;
  font-weight: bold;
  border: 2px solid #fff;
}
.input-help{
  margin-left: 20px;
}
</style>
